<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
            height: 24px;
        }
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <th>
            <input type="checkbox" name="" id="checkAll"/>全选/全不选
        </th>
        <th>菜名</th>
        <th>商家</th>
        <th>价格</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="check"/>
        </td>
        <td>红烧肉</td>
        <td>隆江猪脚饭</td>
        <td>￥200</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="check"/>
        </td>
        <td>香酥排骨</td>
        <td>隆江猪脚饭</td>
        <td>￥998</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="check"/>
        </td>
        <td>北京烤鸭</td>
        <td>隆江猪脚饭</td>
        <td>￥88</td>
    </tr>
</table>
<script src="common.js"></script>
<script>
    var checkAll = document.getElementById('checkAll');
    var checks = document.getElementsByName('check');
        checkAll.onclick = function () {
            for (var i = 0; i < checks.length; i++) {
                checks[i].checked = this.checked
            }
        }
        for (var i = 0; i < checks.length; i++) {
            var flag = true;
            checks[i].onclick = function () {

                for (var j = 0; j < checks.length; j++) {
                    if (checks[j].checked == false) {
                        flag = false;
                        break;
                    }
                }
                if (flag == true) {
                    checkAll.checked = true;
                } else {
                    checkAll.checked = false;
                }
                checkAll.checked=false;
            }

        }

</script>
</body>
</html>